<script setup>
// 静态引入
// import Child from "./components/Child.vue";

// 动态引入
import {defineAsyncComponent} from "vue";
const Child = defineAsyncComponent(() => import('./components/Child.vue'))
</script>

<template>
	<div class="app">
		<img alt="Vue logo" src="./assets/logo.png"/>
		<h1>我是祖先组件</h1>
		<Suspense>
			<template v-slot:default>
				<Child/>
			</template>
			<template v-slot:fallback>
				<div>加载中...</div>
			</template>
		</Suspense>
	</div>
</template>

<style scoped>
.app {
	background-color: pink;
	padding: 10px 50px;
}
</style>